最近小程序一直成了大家追捧的热点，既上次介绍了小程序开发中的微信登录。文章： 微信小程序开发(一) 微信登录流程， 这次介绍下小程序当中常用的图片上传。
前几天做了图片上传功能，被坑了一下。接下来我们来看一下微信的上传api。
这里的filePath就是图片的存储路径，类型居然是个String，也就是 只能每次传一张图片，我以前的接口都是接收一个array，我本人又是一个半吊子的php，只能自己去改接收图片的接口。
看一下页面效果图
一个很常见的修改头像效果，选择图片（拍照），然后上传。
XML代码
首先是小程序的xml代码代码语言：javascript复制昵称宝宝性别{{item.value}}宝宝年龄保存css代码我就不贴了，一些样式而已。
JS代码
代码语言：javascript复制var util = require('../../../utils/util.js')var app = getApp()Page({ data: {sex_items: [ {name:'1', value:'小王子'}, {name:'2', value:'小公主'}, {name:'0', value:'尚无'}],logo:null,userInfo: {} },//事件处理函数 bindViewTap: function() {wx.navigateTo({ // url: '../logs/logs'//url: '../load/load'}) }, onLoad: function () {console.log('onLoad')var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function(userInfo){ //更新数据 console.log(userInfo); that.setData({userInfo:userInfo,logo:userInfo.logo })}) }, bindSaveTap: function(e){console.log(e)var formData = { uid:util.getUserID(), user_name:e.detail.value.nick_name, baby_sex:e.detail.value.baby_sex, baby_age:e.detail.value.baby_age}console.log(formData)app.apiFunc.upload_file(app.apiUrl.modify_user, this.data.logo, 'photos', formData,function(res){ console.log(res);},function(){}) },chooseImageTap: function(){let _this = this;wx.showActionSheet({ itemList: ['从相册中选择', '拍照'], itemColor: "#f7982a", success: function(res) {if (!res.cancel) { if(res.tapIndex == 0){_this.chooseWxImage('album') }else if(res.tapIndex == 1){_this.chooseWxImage('camera') }} }}) },chooseWxImage:function(type){let _this = this;wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: [type], success: function (res) {console.log(res);_this.setData({ logo: res.tempFilePaths[0],}) }}) }})主要讲解一下JS代码
1、chooseImageTap方法 用来显示一个选择图片和拍照的弹窗，用到了微信的一个页面交互的api showActionSheet，点击查看详细使用
示例代码：
代码语言：javascript复制wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function(res) {console.log(res.tapIndex) }, fail: function(res) {console.log(res.errMsg) }})